<template>
  <div class="login-container">
    <el-form
      class="card-box login-form"
      autocomplete="on"
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-position="left"
    >
      <h3 class="title">商家后台管理系统</h3>
      <el-form-item prop="username" class="item">
        <el-input
          size="large"
          placeholder="请输入账号"
          name="username"
          autocomplete="on"
          v-model="ruleForm.username"
        >
          <i slot="prefix" class="el-input__icon" style="padding-left:5px;">
            <icon-svg icon-class="yonghu"/>
          </i>
        </el-input>
      </el-form-item>
      <el-form-item prop="password" class="item">
        <el-input
          placeholder="请输入密码"
          name="password"
          :type="isShowPwd ? 'text' : 'password'"
          @keyup.enter.native="handleLogin"
          v-model="ruleForm.password"
          autocomplete="on"
        >
          <i slot="prefix" class="el-input__icon" style="padding-left:5px;">
            <icon-svg icon-class="suo"/>
          </i>
          <i
            slot="suffix"
            class="el-input__icon"
            style="cursor: pointer;"
            @click="isShowPwd = !isShowPwd"
          >
            <icon-svg :icon-class="isShowPwd?'yanjing-kai':'yanjing-bi'"/>
          </i>
        </el-input>
      </el-form-item>
      <div>
        <span style="color:#ccc;cursor:pointer;position:absolute;right:0 ;line-height:20px" @click="forget">忘记密码？</span>
        <el-button
          type="primary"
          style="width:100%;margin-bottom:30px;margin-top:30px"
          :loading="loading"
          @keyup.enter.native="handleLogin"
          @click.native="handleLogin()"
        >登录</el-button>
      </div>

    </el-form>
    <!-- dialog -->
     <el-dialog
            title="修改密码"
            :visible.sync="dialogEdit"
            width="30%"
            :before-close="hideDialogEdit"
            :close-on-click-modal="false">
            <el-form :model="formData" label-width="100px" :rules="rules1"  ref="formData"  class="demo-ruleForm"  >
                <el-form-item label="手机号码" prop="phone" style="background:#f4f4f5;" class="item1" >
                    <el-input v-model.trim="formData.phone" placeholder="请输入账号" style = "color:red; width:50%;"></el-input>
                </el-form-item>
                <el-form-item label="验证码" prop="validCode" class="item1" style="background:#f4f4f5;">
                    <el-input v-model="formData.validCode" placeholder="请输入验证码"  style = "width:30%;"></el-input>
                    <el-button style="position:absolute;right:0" @click="getCode" type="primary" :disabled="disabled" v-show="show">获取验证码</el-button>
                    
                    <el-button style="position:absolute;right:0"  type="primary" :disabled="disabled" v-show="isShow">剩余{{second}}秒</el-button>
                </el-form-item>
                <el-form-item label="输入新密码" prop="newPassword" class="item1" style="background:#f4f4f5;">
                    <el-input v-model="formData.newPassword" placeholder="请输入密码" style = " width:50%;"></el-input>
                </el-form-item>
                <el-form-item label="确认新密码" prop="newPasswordTwo"  class="item1" style="background:#f4f4f5;">
                    <el-input v-model="formData.newPasswordTwo" placeholder="请再次输入密码" style = " width:50%;"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogEdit = false">取 消</el-button>
            <el-button type="primary" :loading="formSumbitLoding" @click="formSumbit">提交</el-button>
          </span>
        </el-dialog>
  </div>
</template>

<script>
import { getCode,forgetPassword} from "../../api/editPassword/index";
export default {
    data() {
        var checkPhone = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error("手机号不能为空"));
                } else {
                    const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
                    // console.log(reg.test(value));
                    if (reg.test(value)) {
                        callback();
                    } else {
                        return callback(new Error("请输入正确的手机号"));
                    }
                }
            };
        return {
            second:60,
            formSumbitLoding:false,
            formData:{
                phone:"",
                validCode:"",
                newPassword:"",
                newPasswordTwo:""
            },
            dialogEdit:false,
            ruleForm: {
                client_id:"portal-app",
                client_secret:"123456",
                grant_type:"password",
                password: '',
                refresh_token: '',
                username: '',
                accounttype:1
            },
            query:{
                phone:"",
                
            },
            disabled:false,
            isShow:false,
            show:true,
            rules: {
                username: [
                    { required: true, message: "请输入账号", trigger: "blur" }
                ],
                password: [
                    { required: true, message: "请输入密码", trigger: "blur" }
                ]
            },

            rules1: {//表单校验

                    
                    phone: {
                        required: true,
                        validator: checkPhone,
                        message: "请输入手机号",
                        trigger: "blur"
                    },
                    validCode: {
                        required: true,
                        message: "请正确输入验证码",
                        trigger: "blur"
                    },
                    newPassword: {
                        required: true,
                        message: "请正确输入密码",
                        trigger: "blur"
                    },
                    newPasswordTwo:{
                        required: true,
                        message: "请再次输入密码",
                        trigger: "blur"
                    }

                },
            timer:"",//计时器
            isShowPwd: false, // 是否显示密码
            loading: false, // 登录loading
            redirect: null // 回调地址
        };
    },
    methods: {
        //忘记密码
        forget(){
            this.dialogEdit=true
            clearInterval(this.timer);
            this.second=60
            this.show=true
            this.isShow=false
            this.disabled=false
           if (this.$refs["formData"]) {
                    this.$refs['formData'].resetFields();//清除formData表单
                    this.$refs["formData"].clearValidate();//清除表单验证
            }
        },
        //点击获取验证码
        getCode(){
            if(this.timer){
                clearInterval(this.timer)
                this.second=60

            }
            
            if(this.formData.phone){
                this.disabled=true
                this.query.phone = this.formData.phone
                getCode(this.query)
                .then(res=>{
                    if(res.code ==0){
                        this.disabled = true
                        this.isShow=true
                        this.show=false
                        this.$message.success("正在发送验证码")
                        this.timer = setInterval(()=>{
                        if( this.second>1 && this.second<61){
                                this.second --
                        }else {
                                this.second=0
                                this.isShow=false
                                this.show=true
                                this.disabled=false
                            }
                        },1000)

                    }else{
                        this.$message.warning(res.message)
                        this.isShow=false
                        this.disabled=false
                        this.show=true
                    }
                })
                

            }else{
                
                this.$message.warning("请输入手机账号")
            }
        },
        formSumbit(){
          this.$refs["formData"].validate(valid=>{
              if(valid){
                  this.formSumbitLoding =true
                  
                  forgetPassword(this.formData)
                  .then(res=>{
                      if(res.code ==0){
                          this.formSumbitLoding =false
                          this.$message.success("恭喜您修改密码成功")
                          this.dialogEdit=false
                          return 
                      }
                      if(res.code !=0){
                          this.$message.warning(res.message)
                          this.dialogEdit=true
                          this.formSumbitLoding =false
                      }
                      
                      
                  })
                  .catch(err=>{
                      this.$message.error(err)
                      this.formSumbitLoding =false
                      this.dialogEdit=false
                  })
                  
              }else{
                  return false
              }
          })  
        },
         /*隐藏 -新增或编辑弹框*/
            hideDialogEdit() {
                this.dialogEdit = false;

                //隐藏弹框时需要清除弹框内容
                if (this.$refs["formData"]) {
                    this.$refs['formData'].resetFields();//清除formData表单
                    this.$refs["formData"].clearValidate();//清除表单验证
                }
                //如果上传文件，还需要清除文件列表
            },
        handleLogin() {
            this.$refs["ruleForm"].validate(valid => {
                if (valid) {
                    this.loading = true;
                    this.$store
                        .dispatch("loginName", this.ruleForm)
                        .then(response => {
                            if (response.code) {
                                this.loading = false;
                                return;
                            }
                            let path = "/";
                            if (this.redirect) {
                                path = this.redirect;
                            }
                            //跳转后存在浏览器返回上一页403的问题
                            // this.$router.push({
                            //     path: path,
                            // });
                            //解决方案
                            window.location.replace(path);
                        })
                        .catch(() => {
                            this.loading = false;
                        });
                } else {
                    return false;
                }
            });
        }
    },
    created() {
        // 将参数拷贝进查询对象
        let query = this.$route.query;
        if (query.redirect) {
            // URL Encode
            this.redirect = decodeURIComponent(query.redirect);
        }
    },
    beforeDestroy(){
        clearInterval(this.timer);
    }

};
</script>
<style type="text/scss" lang="scss" scoped>
    .login-container .el-form-item {
        width: 100%;
    }

</style>
<style scoped>
    
    .item1 /deep/ .el-form-item__label{
        color:#666;
        font-size:14px;
        padding: 0 12px 0 0;
    }
    .item1 ::-webkit-input-placeholder{
        color:#ccc !important;

    }
   
</style>

<style type="text/scss" lang="scss">
@import "../../styles/mixin";

$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;
.login-container {
    @include relative;
    height: 100%;
    background-color: $bg;
    input:-webkit-autofill {
        -webkit-box-shadow: 0 0 0 1000px #293444 inset !important;
        -webkit-text-fill-color: #fff !important;
    }
   
    .item {
        .el-form-item__content {
            display: flex;
            flex-flow: row;
            height: 100%;
        }
        input {
            padding-left: 35px;
        }
    }
    input {
        background: transparent;
        border: 0;
        -webkit-appearance: none;
        border-radius: 0;
        padding: 0.1rem 0.0666rem 0.16rem 0.2rem;
        color: $light_gray;
        height: 100%;
    }
    .el-input {
        display: inline-block;
        font-size: 15px;
    }
     .item1 .el-input__inner{
        color:#E6A23C!important;
    }
    .tips {
        font-size: 14px;
        color: #fff;
        margin-bottom: 0.13333rem;
    }
    .svg-container {
        padding: 0.08rem 0.0666rem 0.08rem 0.2rem;
        color: $dark_gray;
        vertical-align: middle;
        display: inline-block;
        &_login {
            font-size: 20px;
        }
    }
    .title {
        font-size: 26px;
        color: $light_gray;
        margin: 0 auto 2rem auto;
        text-align: center;
        font-weight: bold;
        line-height: 40px;
    }
    .login-form {
        @include fxied-center;
        top: 40%;
        width: 27em;
        padding: 0.4666rem 0.4666rem 0.2rem 0.4666rem;
    }
    .el-form-item {
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(0, 0, 0, 0.1);
        border-radius: 5px;
        color: #454545;
        height: 3rem;
    }
    .show-pwd {
        position: absolute;
        right: 0.1333rem;
        top: 0.09333rem;
        font-size: 16px;
        color: $dark_gray;
        cursor: pointer;
    }
    .thirdparty-button {
        /*position: absolute;*/
        /*right: .4666rem;*/
        /*bottom: .37333rem;*/
    }
}

</style>
